<!DOCTYPE html>
<html lang="en">
<meta name="x-csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="/css/app.css">
<div class="row col-lg-offset-3">
    <div class="col-sm-6">
        <div class="ibox float-e-margins">
            <div class="ibox-title col-lg-offset-3">
                <h1>注册</h1>
            </div>
            <div class="ibox-content">
                <form action="{{url('/add')}}" method="post" id="add" class="form-horizontal m-t" id="commentForm">
                    <input type="hidden" name="_token" value="{{csrf_token()}}" id="token">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">姓名：</label>
                        <div class="col-sm-8">
                            <input id="username" id="username" name="username" minlength="2" type="text" class="form-control" required="" aria-required="true">
                        </div>
                    </div>
                    @if($errors)
                    <div class="form-group">
                        <label class="col-sm-3 control-label">E-mail：</label>
                        <div class="col-sm-8">
                            <input id="cemail" type="email" class="form-control" name="email" required="" aria-required="true">
                                {{ $errors->first('email')}}
                        </div>
                  </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">手机号：</label>
                        <div class="col-sm-8">
                            <input  type="text" class="form-control" name="mobile" id="mobile">
                            {{ $errors->first('mobile')}}
                        </div>
                    </div>
                    <div class="form-group">
                    <label class="col-sm-3 control-label">密码：</label>
                    <div class="col-sm-8">
                        <input  type="password" class="form-control" name="pwd" id="pwd">
                        {{ $errors->first('pwd')}}
                    </div>
                    </div>
                    <div class="form-group">
                    <label class="col-sm-3 control-label">再次输入密码：</label>
                    <div class="col-sm-8">
                        <input  type="password"  class="form-control" name="pwd_confirmation" id="pwd_confirmation">
                        {{ $errors->first('pwd_confirmation')}}
                    </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">验证码：</label>
                        <div class="col-sm-8">
                        <input type="text" name="code" id="code">
                        {{ $errors->first('code')}}
                        </div>
                        <button class="btn btn-primary" id="send" type="button">点击获取验证码</button>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-4 col-sm-offset-3">
                            <button class="btn btn-primary" id="btn" type="submit">提交</button>
                        </div>
                    </div>
                    @endif
                </form>
                {{--<a href="{{url('/qqlogin')}}">获取信息</a>--}}
                <a href="{{url('/qq')}}"><img src="/logo/Connect_logo_7.png" alt="登陆图标"></a>
                <a href="{{url('/weixin')}}">微信登陆</a>
                {{--<a href="{{url('/weixin/callback')}}">微信回调</a>--}}
            </div>
        </div>
    </div>
</div>
    <script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-validate/1.19.0/jquery.validate.min.js"></script>
    <script>
        $.ajaxSetup({
            headers : {
                'X-CSRF-TOKEN' : $("meta[name='x-csrf-token']").attr('content')
            }
        });
    </script>
    <script>
        $('#btn').click(function () {
            var username =$('#username').val();
            var pwd = $('#pwd').val();
            var pwd_confirmation = $('#pwd_confirmation').val();
            var email = $('#email').val();
            var mobile = $('#mobile').val();
            var token = $('#token').val();
            var data = {
                username: username,
                mobile:mobile,
                email:email,
                pwd:pwd,
                pwd_confirmation:pwd_confirmation,
                __token:token
            }
            $.post("{{url('/add')}}",data,function (e) {
                if (e.code){
                    alert(e.info)
                } else {
                    alert(e.info)
                }
            })
            {{--$.ajax({--}}
            {{--url : "{{url('/add')}}",--}}
            {{--type : "post",--}}
            {{--dataType : "json",--}}
            {{--data: data,--}}
            {{--success : function(e) {--}}
            {{--console.log(e)--}}
            {{--if (e.code) {--}}
            {{--alert(e.info)--}}
            {{--}else {--}}
            {{--alert(e.info)--}}
            {{--}--}}
            {{--},--}}
            {{--// error : function (e) {--}}
            {{--//     alert('验证失败')--}}
            {{--// }--}}
            {{--});--}}
        })
    </script>
    {{--发送验证码--}}
    <script>
        $.ajaxSetup({
            headers : {
                'X-CSRF-TOKEN' : $("meta[name='x-csrf-token']").attr('content')
            }
        });
        var au;
        $('#send').click(function () {
            var mobile = $('#mobile').val();
            var m = /^1[34578]\d{9}$/;
            var i = $(this);
            if(m.test(mobile)){
                $.post("{{url('/sendsms')}}", {mobile:mobile}, function (e) {
                    if(e.code){
                        i.html('<span id="second">60</span>秒后重新发送');
                        au = setInterval(f, 1000);
                        i.attr('disabled', 'disabled');
                    }else{
                        alert(e.info);
                    }
                });

            }else {
                alert('你输入的手机号有误')
            }
        });

        function f() {
            var t = parseInt($('#second').html());
            if(t == 0){
                clearInterval(au);
                $('#send').html('点击获取验证码').attr('disabled', false);
            }else {
                $('#second').html(t-1)
            }
        }
    </script>


    {{--前端表单验证--}}
    <script>
        jQuery.validator.addMethod("isMobile", function(value, element) {
            var length = value.length;
            var mobile = /^1[34578]\d{9}$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请正确填写您的手机号码");
        $("#add").validate({
            //定义的是表单验证的规则
            rules: {
                username: {
                    required: true,
                    minlength: 2,
                    //该控件的的最大长度不能大于12
                    maxlength: 6
                },

                mobile: {
                    required: true,
                    //输入的必须是个合法的email
                    isMobile: true
                },
                email:{
                    required:true,
                },
                password: {
                    required: true,
                    passwordCheck:true,
                    minlength: 6,
                    maxlength: 12,
                },
                pwd_confirmation: {
                    required: true,
                    minlength: 6,
                    maxlength: 12,
                    equalTo: "#pwd"
                },
                code: {
                    required:true,
                    minlength:6,
                    maxlength:6
                }

            },
            //表单验证失败的时候的提示信息
            messages: {
                username: {
                    required: "请输姓名",
                    minlength: "长度不能小于2个字符",
                    maxlength: "长度不能大于4个字符"
                },
                mobile: "请输入一个正确的手机号",
                email: '请输入一个正确邮箱',
                password:{
                    required:'密码不能为空',
                    minlength: '密码长度最小六位',
                    maxlength: '密码长度不能大于12位',
                },
                pwd_confirmation: {
                    required:'密码不能为空',
                    minlength: '密码长度最小六位',
                    maxlength: '密码长度不能大于12位',
                    equalTo: '两次输入不一致'
                },
                code:{
                    required:'验证码不能位空',
                    minlength: '验证码长度有误',
                    maxlength: '验证码长度有误'
                }
            },

            {{--submitHandler:function () {--}}
                {{--var username =$('#username').val();--}}
                {{--var pwd = $('#pwd').val()--}}
                {{--var pwd_confirmation = $('#pwd_confirmation').val()--}}
                {{--var email = $('#email').val()--}}
                {{--var mobile = $('#mobile').val()--}}
                {{--var token = $('#token').val();--}}
                {{--var data = {--}}
                    {{--username: username,--}}
                    {{--email:email,--}}
                    {{--pwd:pwd,--}}
                    {{--pwd_confirmation:pwd_confirmation,--}}
                    {{--mobile:mobile,--}}
                    {{--__token:token--}}
                {{--}--}}
                {{--$.ajax({--}}
                    {{--url : "{{url('/add')}}",--}}
                    {{--type : "post",--}}
                    {{--dataType : "json",--}}
                    {{--data: data,--}}
                    {{--success : function(e) {--}}
                        {{--if (e.code) {--}}
                            {{--alert(e.info)--}}
                        {{--}else {--}}
                            {{--alert(e.info)--}}
                        {{--}--}}
                    {{--},--}}
                    {{--error : function (e) {--}}
                        {{--alert('验证失败')--}}
                    {{--}--}}
                {{--});--}}
                {{--$.post("{{url('/add')}}",{username:username,email:email,pwd:pwd,mobile:mobile}, function(e){--}}
                    {{--if (!e.code) {--}}
                        {{--alert(e.info)--}}
                    {{--}else {--}}
                        {{--alert(e.info)--}}
                    {{--}--}}

                {{--})--}}
            {{--}--}}
        })
    </script>





    <script>
        $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
    </script>

</body>
</html>